<template>
  <div class="medimind-app">
    <!-- Header -->
    <header class="site-header">
      <div class="header-container">
        <div class="logo-container">
          <img src="./assets/hospital-logo.svg" alt="MediMind Logo" class="logo" />
          <h1 class="site-title">MediMind 智慧医疗</h1>
        </div>
        <nav class="main-nav">
          <el-menu mode="horizontal" :ellipsis="false" class="nav-menu">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">科室介绍</el-menu-item>
            <el-menu-item index="3">医生团队</el-menu-item>
            <el-sub-menu index="4">
              <template #title>智能工具</template>
              <el-menu-item index="4-1" @click="$router.push('/tools/html-extract')">HTML结构化提取</el-menu-item>
              <el-menu-item index="4-2" @click="$router.push('/tools/template-process')">TXT解析工具</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="5">就医指南</el-menu-item>
            <el-menu-item index="6">关于我们</el-menu-item>
          </el-menu>
        </nav>
        <div class="header-actions">
          <el-button type="primary" plain size="small">登录</el-button>
          <el-button type="primary" size="small">预约挂号</el-button>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="main-content">
      <div class="page-container">
        <!-- Router View -->
        <router-view />
      </div>
    </main>

    <!-- Footer -->
    <footer class="site-footer">
      <div class="footer-container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于MediMind</h3>
            <p>MediMind智慧医疗平台致力于提供高质量、便捷的医疗服务与解决方案</p>
          </div>
          <div class="footer-section">
            <h3>快速链接</h3>
            <ul class="footer-links">
              <li><a href="#">首页</a></li>
              <li><a href="#">科室介绍</a></li>
              <li><a href="#">医生团队</a></li>
              <li><a href="#">智能工具</a></li>
              <li><a href="#">就医指南</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>联系我们</h3>
            <p>地址：中国某省某市某区某路1号</p>
            <p>电话：400-123-4567</p>
            <p>邮箱：contact@medimind.com</p>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; {{ new Date().getFullYear() }} MediMind 智慧医疗. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled, DocumentCopy, Loading, DataAnalysis, Unlock, Promotion } from '@element-plus/icons-vue'
import api from './services/api.js'

// 状态管理
const activeTab = ref('file')
const htmlContent = ref('')
const fileList = ref([])
const result = ref('')
const loading = ref(false)

// 格式化JSON显示
const formattedResult = computed(() => {
  try {
    if (!result.value) return ''
    // 尝试解析JSON，如果已经是对象，先转为字符串
    const jsonObj = typeof result.value === 'string' 
      ? JSON.parse(result.value) 
      : result.value
    return JSON.stringify(jsonObj, null, 2)
  } catch (e) {
    // 如果解析失败，直接返回原始字符串
    return result.value
  }
})

// 文件上传处理
const handleFileChange = (uploadFile) => {
  console.log('文件已选择:', uploadFile)
  fileList.value = [uploadFile]
}

// 文件移除处理
const handleFileRemove = () => {
  fileList.value = []
}

// 提交文件处理
const submitFile = async () => {
  if (!fileList.value.length) {
    ElMessage.warning('请先选择文件')
    return
  }
  
  loading.value = true
  try {
    const response = await api.extractFromFile(fileList.value[0].raw)
    console.log('API响应:', response)
    result.value = response.data.data
    ElMessage.success('处理成功')
  } catch (error) {
    console.error('提取失败:', error)
    ElMessage.error(`提取失败: ${error.response?.data?.message || error.message}`)
    result.value = error.response?.data || error.message
  } finally {
    loading.value = false
  }
}

// 提交文本处理
const submitText = async () => {
  if (!htmlContent.value) {
    ElMessage.warning('请先输入HTML内容')
    return
  }
  
  loading.value = true
  try {
    const response = await api.extractFromText(htmlContent.value)
    console.log('API响应:', response)
    result.value = response.data.data
    ElMessage.success('处理成功')
  } catch (error) {
    console.error('提取失败:', error)
    ElMessage.error(`提取失败: ${error.response?.data?.message || error.message}`)
    result.value = error.response?.data || error.message
  } finally {
    loading.value = false
  }
}

// 复制JSON到剪贴板
const copyToClipboard = () => {
  navigator.clipboard.writeText(formattedResult.value)
    .then(() => {
      ElMessage({
        message: 'JSON已复制到剪贴板',
        type: 'success'
      })
    })
    .catch((err) => {
      console.error('复制失败:', err)
      ElMessage.error('复制失败')
    })
}
</script>

<style>
:root {
  --primary-color: #409EFF;
  --secondary-color: #67C23A;
  --text-color: #303133;
  --light-text: #606266;
  --lighter-text: #909399;
  --border-color: #DCDFE6;
  --bg-color: #F5F7FA;
  --card-bg: #FFFFFF;
  --header-height: 64px;
  --footer-height: 260px;
  --max-width: 90vw;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #app {
  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
  width: 100%;
}

.medimind-app {
  min-height: 100vh;
  width: 100vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Header Styles */
.site-header {
  background-color: var(--card-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  max-width: 100%;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  max-width: 95%;
  margin: 0 auto;
  padding: 0 20px;
  height: var(--header-height);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0;
}

.main-nav {
  flex-grow: 1;
  margin-left: 40px;
}

.nav-menu {
  border-bottom: none !important;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.active-nav {
  color: var(--primary-color) !important;
  font-weight: bold;
}

/* Main Content */
.main-content {
  flex: 1;
  width: 100%;
  max-width: 100%;
}

.page-container {
  width: 95%;
  max-width: 95%;
  margin: 0 auto;
  padding: 30px 20px;
}

.page-header {
  margin-bottom: 24px;
  margin-top: 16px;
}

.page-title {
  font-size: 28px;
  color: var(--text-color);
  margin-bottom: 8px;
  font-weight: 500;
}

.page-description {
  color: var(--light-text);
  font-size: 16px;
}

/* Tool Section */
.tool-section {
  margin-top: 24px;
}

.tool-card {
  margin-bottom: 24px;
  border-radius: 8px;
  border: none;
}

.tool-tabs {
  padding: 10px;
}

.upload-area {
  padding: 20px;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  background-color: #fafafa;
  text-align: center;
}

.action-bar {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* Results */
.result-card {
  margin-top: 24px;
  border-radius: 8px;
  border: none;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-color);
}

.result-content {
  overflow: auto;
}

.json-result {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
}

/* Features Section */
.features-section {
  margin-top: 40px;
  padding: 20px 0;
}

.section-title {
  font-size: 24px;
  color: var(--text-color);
  margin-bottom: 24px;
  text-align: center;
}

.feature-item {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.feature-item h4 {
  margin: 16px 0 8px;
  color: var(--text-color);
  font-size: 18px;
}

.feature-item p {
  color: var(--light-text);
  font-size: 14px;
}

/* Footer */
.site-footer {
  background-color: #304156;
  color: #fff;
  padding: 40px 0 20px;
  margin-top: 40px;
}

.footer-container {
  width: 95%;
  max-width: 95%;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-section {
  flex: 1;
  min-width: 200px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
  color: #fff;
}

.footer-section p {
  color: #B3BAC5;
  margin-bottom: 10px;
  font-size: 14px;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #B3BAC5;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 14px;
}

.footer-links a:hover {
  color: #fff;
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 30px;
  padding-top: 20px;
  text-align: center;
  color: #B3BAC5;
  font-size: 14px;
}

/* Animation */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    height: auto;
    padding: 10px 20px;
  }
  
  .logo-container {
    margin-bottom: 10px;
  }
  
  .main-nav {
    margin-left: 0;
    width: 100%;
  }
  
  .header-actions {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
  
  .footer-content {
    flex-direction: column;
  }
  
  .footer-section {
    margin-bottom: 20px;
  }
  
  .feature-item {
    margin-bottom: 20px;
  }
}

/* Loading icon styles */
.loading-icon {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 添加额外的样式以确保元素占满宽度 */
.tool-section, 
.tool-card, 
.result-card, 
.features-section {
  width: 100%;
  max-width: 100%;
}

.el-card__body {
  width: 100%;
}

.site-footer {
  width: 100%;
  max-width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-container,
  .page-container,
  .footer-container {
    width: 98%;
    max-width: 98%;
  }
}
</style>
